<template>
 <div class='model-wrap' @wheel.stop.prevent="false" :style="{background: maskBg}" v-if="showModel">
   <div class="model-content" :style="{width: wrapWidth || maskWidth}">
      <header class="model-header">
        <div class="slot-header">
          <slot name="header">
            我是头部
          </slot>
        </div>
        <div class="model-close" @click="closeModel">
          <i class="left"></i>
          <i class="right"></i>
        </div>
      </header>
      <main class="model-main">
        <div class="slot-main">
          <slot></slot>
        </div>
      </main>
      <footer class="model-footer">
        <div class="slot-footer">
          <slot name="footer">
            我是底部
          </slot>
        </div>
      </footer>
   </div>
 </div>
</template>

<script>
export default {
  props: {
    maskBg: {
      type: String,
      default: '#444'
    },
    maskWidth: {
      type: [Number, String],
      default: '500px'
    },
    showModel: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  computed: {
    wrapWidth () {
      if (this.maskWidth) {
        return typeof this.maskWidth === 'string'
          ? this.maskWidth
          : this.maskWidth + 'px'
      }
    }
  },
  watch: {
  },
  methods: {
    closeModel () {
      // this.showModel = false
      this.$emit('close-model', false)
    }
  },
  created () {

  }
}
</script>

<style scoped>
.model-wrap {
  text-align: left;
  color: #fff;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: .7;
}

.model-content {
  background: #000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1000;
}

.model-header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #222;
}

.slot-header {
  flex: 1;
}

.model-close {
  width: 34px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  position: relative;
  cursor: pointer;
}

.model-close .left, .model-close .right {
  position: absolute;
  width: 4px;
  height: 24px;
  background: #333;
  transform: rotate(45deg);
  display: inline-block;
  top: 5px;
  left: 15px;
}

.model-close .right {
  transform: rotate(315deg);
}

.model-close:hover {
  background: #f00;
}

.model-main {
  padding: 20px;
}

.model-footer {
  border-top: 1px solid #ccc;
  padding: 20px;
}

</style>
